
import React from 'react'

import BackgroundPropertySettingProperty from './BackgroundPropertySettingProperty'


class BackgroundPropertySettingCreate extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
    // console.log(props.data)
  }

  onCreatePropertyClick() {
    this.props.onCreatePropertyClick();
  }
  onCreateRoleClick() {
    this.props.onCreateRoleClick();
  }

  onDataSubmit() {

    var username = this.state.data.username,
        password = this.state.data.password,
        passwordAgain = this.state.data.passwordAgain,
        firstName = this.state.data.firstName,
        lastName = this.state.data.lastName,
        working_property_id = this.state.data.working_property_id,
        mobile = this.state.data.mobile,
        email = this.state.data.email,
        sys_role_user = this.state.data.sys_role_user;

    if (this.checkEmpty(username) || this.checkEmpty(firstName) || this.checkEmpty(lastName)
    || this.checkEmpty(working_property_id) || this.checkEmpty(email) || this.checkEmpty(password)
    || this.checkEmpty(passwordAgain)) {
        alert("请输入完成信息!")
        return;
    }
    if (!this.checkPhone(mobile)) {
      alert("请输入正确的手机号")
      return;
    }

    if (password != passwordAgain) {
      alert("两次密码输入不相同!")
      return;
    }

    if (!sys_role_user || sys_role_user.length <= 0) {
      alert("请选择角色!")
      return;
    }

    this.props.onDataCreate(this.state.data)
    $('#bakckgound-propertyId').attr("value","");
    $('#role-name').attr("value","");
  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  onCancelClicked(){
    $('#bakckgound-propertyId').attr("value","");
    $('#role-name').attr("value","");
  }

  checkEmpty(text) {
    return !text || text.length == 0
  }

  checkPhone(phone) {
  	var phoneRex = /^(13[0-9]{9})|(14[0-9]{9})|(15[0-9]{9})|(18[0-9]{9})|(17[0-9]{9})$/;
  	if (phone == "" || phoneRex.test(phone) == false || phone.length > 11) {
  		return false;
  	}
  	return true;
  }

  renderRoleList() {
    var content = [];
    if (this.props.data && this.props.data.sys_role_user && this.props.data.sys_role_user.length > 0) {
      this.props.data.sys_role_user.forEach(function(sysRoleUser, index) {
        var name = "";
        if (sysRoleUser.role) {
          name = sysRoleUser.role.name
        }
        content.push(
          <tr>
            <td>{name}</td>
          </tr>
        )
      })
    }
    return content;
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="BackgroundPropertySettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">新增管理员账号</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="bakckgound-manager">管理员</label>
                <input ref="backgroundManager" type="text" className="form-control"
                        id="background-manager" placeholder="管理员" value={self.state.data.username}
                        onChange={(event)=>this.onChange(event, "username")}/>
              </div>
              <div className="form-group">
                <label for="bakckgound-password">密码</label>
                <input ref="backgroundPassword" type="password" className="form-control"
                        id="bakckgound-password" placeholder="密码" value={self.state.data.password}
                        onChange={(event)=>this.onChange(event, "password")}/>
              </div>
              <div className="form-group">
                <label for="bakckgound-password">再次输入密码</label>
                <input ref="backgroundPassword" type="password" className="form-control"
                        id="bakckgound-password" placeholder="密码" value={self.state.data.passwordAgain}
                        onChange={(event)=>this.onChange(event, "passwordAgain")}/>
              </div>
              <div className="form-group">
                <label for="background-name">姓</label>
                <input ref="backgroundName" type="text" className="form-control"
                        id="background-name" placeholder="姓" value={self.state.data.firstName}
                        onChange={(event)=>this.onChange(event, "firstName")}/>
              </div>
              <div className="form-group">
                <label for="background-name">名</label>
                <input ref="backgroundName" type="text" className="form-control"
                        id="background-name" placeholder="名" value={self.state.data.lastName}
                        onChange={(event)=>this.onChange(event, "lastName")}/>
              </div>
              <div className="form-group">
                <label for="bakckgound-propertyId">小区物业&nbsp;</label>
                <button type="button"  onClick={(event)=>this.onCreatePropertyClick()}><span className="glyphicon glyphicon-plus"></span></button>
                <input ref="backgroundPropertyId" type="text" className="form-control"
                        id="bakckgound-propertyId" placeholder="小区物业"
                        value={self.state.data.WorkingProperty?self.state.data.WorkingProperty.name: ""}
                        onChange={(event)=>this.onChange(event, "working_property_id")} disabled/>
              </div>

              <div className="form-group">
                <label for="bakckgound-phone">手机号</label>
                <input ref="backgroundPhone" type="text" className="form-control"
                        id="bakckgound-phone" placeholder="手机号" value={self.state.data.mobile}
                        onChange={(event)=>this.onChange(event, "mobile")}/>
              </div>
              <div className="form-group">
                <label for="bakckgound-mail">邮箱</label>
                <input ref="backgroundMail" type="text" className="form-control"
                        id="bakckgound-mail" placeholder="邮箱" value={self.state.data.email}
                        onChange={(event)=>this.onChange(event, "email")}/>
              </div>
              <div className="form-group">
                <label for="role-name">角色名&nbsp;</label>
                <button type="button" onClick={(event)=>this.onCreateRoleClick()}><span className="glyphicon glyphicon-plus"></span></button>
                <table className="table">
                  {this.renderRoleList()}
                </table>
              </div>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal" onClick={(event)=> this.onCancelClicked()}>取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}


export default BackgroundPropertySettingCreate
